import React, {FC, useEffect, useState} from "react";
import {Avatar, Button, Form, Image, Input, message, Modal, Select, Table} from "antd";
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {baseURL} from "../../../api/ajax";
import {reg, roleList} from "../../../utils"
import api from "../../../api";
import {useLocation} from "react-router-dom";
import BreadcrumbPath from "../../../components/BreadcrumbPath";

const Mine: FC<any> = ({MobxData}) => {
    const {userInfo, getUserInfo} = MobxData;
    //班级信息
    const {classList, getClassList, changeClassList} = MobxData;
    // 对话框是否可见
    const [isModalVisible, setIsModalVisible] = useState(false);

    const [form] = Form.useForm();

    const location = useLocation();

    useEffect(() => {
        getClassList();
        const {state: show} = location;
        show && setIsModalVisible(true);
    }, [])

    const handleOk = () => {
        // 验证表单
        form.validateFields().then(values => {
            api.upUser({...values, id: userInfo._id}).then(res => {
                message.success(res.msg);
            }).catch(err => {
                message.error(err);
            })
            getUserInfo();
            setIsModalVisible(false);

        }).catch(err => {
        })
    }

    return userInfo._id && (
        <div>
            {/*<h1>个人中心</h1>*/}
            <BreadcrumbPath/>
            <div style={{
                width: "500px",
                height: "300px",
                padding: "20px",
                backgroundColor: "#fff",
                borderRadius: "10px",
            }}>
                <table style={{width: "100%", height: "100%", fontSize: "16px"}}>
                    <tbody>
                    <tr>
                        <td>用户名：</td>
                        <td>{userInfo.username}</td>
                        <td rowSpan={4} style={{textAlign: "center"}}>
                            <Image
                                style={{borderRadius: "50%"}}
                                placeholder={<Avatar size={130}/>}
                                width="130px" height="130px"
                                src={userInfo.img.replace(/public/, baseURL) || require('../../../assets/avatar.jpg')}
                            />
                        </td>
                    </tr>
                    <tr>
                        <td>手机号：</td>
                        <td>{userInfo.phone}</td>
                    </tr>
                    <tr>
                        <td>角色：</td>
                        <td>{roleList.find(item => item!.id == userInfo.role)?.name}</td>
                    </tr>
                    {
                        userInfo.role < 1 && (
                            <tr>
                                <td>班级：</td>
                                <td>{userInfo.classname ? userInfo.classname : "没有班级"}</td>
                            </tr>
                        )
                    }
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colSpan={3}>
                            <Button block type="primary" onClick={() => {
                                console.log(userInfo)
                                form.setFieldsValue({
                                    id: userInfo._id,
                                    username: userInfo.username,
                                    phone: userInfo.phone,
                                    classname: userInfo.classname
                                })
                                setIsModalVisible(true)
                            }}>修改</Button>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>

            <Modal title="修改个人信息" okText="提交" cancelText="取消" visible={isModalVisible} onOk={handleOk}
                   onCancel={() => {
                       setIsModalVisible(false)
                   }}>
                <Form
                    name="basic"
                    form={form}
                    layout='vertical'
                    initialValues={{
                        id: userInfo._id,
                        username: userInfo.username,
                        phone: userInfo.phone,
                        classname: userInfo.classname
                    }}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{required: true, message: '用户名不能为空!'}]}
                    >
                        <Input placeholder="请输入用户名"/>
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{required: true, message: '手机号不能为空!'}, {pattern: reg.phone, message: '请输入正确的手机号!'}]}
                    >
                        <Input placeholder="请输入手机号"/>
                    </Form.Item>
                    {
                        userInfo.role < 1 && (
                            <Form.Item
                                label="班级"
                                name="classname"
                                rules={[{required: true, message: '班级名称不能为空!'}]}
                            >
                                <Select style={{width: 200}} onChange={() => {
                                }}>
                                    {
                                        classList.map((item: any) => {
                                            return <Select.Option value={item.name}
                                                                  key={item._id}>{item.name}</Select.Option>
                                        })
                                    }
                                </Select>
                            </Form.Item>
                        )
                    }

                </Form>
            </Modal>
        </div>
    );
}
export default inject('MobxData')(observer(Mine));